<template>
  <div>
    <div class="operation-box">
      <el-button type="primary" @click="router.push('/setting/system/role/create')" :icon="Plus">添加管理员</el-button>
      <el-form inline :model="queryForm" class="filter" label-width="100px">
        <el-form-item label="角色名称：" prop="name">
          <el-col :span="22">
            <el-input v-model="queryForm.entity.userName" placeholder="请输入角色名称" />
          </el-col>
        </el-form-item>
        <el-form-item label="所属角色：">
          <el-col :span="22">
            <el-select v-model="queryForm.entity.roleId" placeholder="请选择" clearable>
              <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item class="filter-actions">
          <el-button class="button-small" type="primary" @click="handleSearch">筛选</el-button>
          <el-button type="text" class="button-reset" @click="handleClear">重置筛选条件</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" border empty-text="没有更多数据了" />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { RoleList } from '@/service/role'
import { ManagerList } from '@/service/manager'

const router = useRouter()
interface IQueryForm {
  userName: string
  roleId: number
}
interface IPageModel {
  orderbyName: string
  isAsc: boolean
  beginDateTime: string
  endDateTime: string
  entity: IQueryForm
}

const roleList = ref<Array>([])
const list = ref<Array>([])

const queryForm = ref<IPageModel>({
  orderbyName: '',
  isAsc: false,
  beginDateTime: '',
  endDateTime: '',
  entity: {
    userName: '',
    roleId: ''
  },
  page: {
    index: 1,
    size: 10
  }
})
const getRoles = (): void => {
  RoleList().then((res: any) => {
    if (res.success) roleList = ref<Array>([]).value = res.data
  })
}
const getManagers = (): void => {
  ManagerList(queryForm.value).then((res: any) => {
    if (res.success) list = ref<Array>([]).value = res.data
  })
}
const handleSearch = (): void => {}
const handleClear = (): void => {}
onMounted(() => {
  getRoles()
  getManagers()
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';
@import '@/assets/styles/tablePage.scss';
@import '@/assets/styles/formPage.scss';
</style>